<template>
	<view class="my-content">
		<view class="res-box" v-for="item in list" @click="toDetail(item.id,item)">
			<text class="res-time">{{item.use_time}}</text>
			<view class="res-con">
				<view class="jiao">{{item.speed}}</view>
				<view class="res-top">
					<text class="res-top-l" :class="{'bg-green':item.status==1,'bg-yellow':item.status==2,'bg-orange':item.status==3,'bg-red':item.status==4}">电桩{{statusText[item.status]}}</text>
					<view class="res-top-c">
						<view class="res-img">
							<image :src="item.pic" mode="widthFix"></image>
						</view>
						<view class="res-text">
							<text class="res-title">{{item.name}}({{item.brand}})</text>
							<view class="res-flex">
								<text>编号:{{item.sn}}</text>
								<text>功率:{{item.rate}}kw</text>
							</view>
							<text>营业时间:{{item.start_time}}-{{item.end_time}}</text>
							<view class="res-flex">
								<text>停车费:{{item.price}}元/千瓦时</text>
								<text class="green" style="display: none;">可约停车位</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				statusText: {
					1: "正常",
					2: "故障",
					3: "被占用 ",
					4: "停用",
				}
			}
		},
		onLoad:function(option) {
			this.getDetail()
		},
		methods: {
			toDetail(id,data) {
				if(data.flag==1){
					uni.navigateTo({
						url: `/pages/detail/pileDetail?id=${id}&lot=0`
					})
				}else{
					this.toast('还没到营业时间哦!')
				}
			},
			async getDetail() {
				var that = this
				const res = await this.http("get", "/api/device/use_device")
				if(res.data){
					that.list = res.data
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.my-content{
		width: 100%;
		padding: 30upx;
		box-sizing: border-box;
		.res-box{
			width: 100%;
			.res-time{
				font-size: 28upx;
				color: #A6A6A6;
				display: block;
				margin-bottom: 10upx;
			}
			.res-con{
				width: 100%;
				border-radius: 16upx;
				overflow: hidden;
				box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3);
				margin-bottom: 20upx;
				position: relative;
				.jiao{
					position: absolute;
					top: 10upx;
					right: 10upx;
					width: 40upx;
					height: 40upx;
					border-radius: 8upx;
					background: #FA5151;
					color: #fff;
					font-size: 24upx;
					text-align: center;
					line-height: 40upx;
				}
				.res-top{
					width: 100%;
					display: flex;
					.res-top-l{
						width: 40upx;
						font-size: 24upx;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						text-align: center;
					}
					.res-top-c{
						display: flex;
						align-items: center;
						width: 90%;
						padding: 10upx;
						box-sizing: border-box;
						.res-img{
							width: 100upx;
							height: 100upx;
							border-radius: 50%;
							overflow: hidden;
							margin-right: 10upx;
							image{
								width: 100%;
								height: auto;
							}
						}
						.res-text{
							.res-flex{
								display: flex;
								text{
									min-width: 200upx;
									margin-right: 20upx;
								}
							}
							.res-title{
								font-size: 28upx;
								color: #000;
							}
							.green{
								color: #00B578;
							}
							text{
								display: block;
								font-size: 24upx;
								color: #9E9E9E;
							}
						}
					}
				}
			}
		}
	}
</style>